<template>
	<view class="order-item">
    <view class="i-top b-b">
			<text class="orderId vc">订单编号：{{item.orderSn}}</text>
			<text class="state">{{statusList[stateTip]}}</text>
		</view>
		<view class="info1 b-b">
			<view class="personal">
				<image class="img" :src="item.workerIcon||baseImg" />
				<view class="vc">由<text class="name">{{item.workerName}}</text>师傅为你维修</view>
			</view>
			<view class="flexT">
				<view class="contact">
					<view><text class="hui">工号：</text>{{item.jobNumber}}</view>
					<view>
						<text class="hui vc">联系电话：</text><text class="vc">{{item.workerMobile}}</text>
						<h-icon @eventClick="telPhone(item.workerMobile)" class-name="tel" src="ico_tel"></h-icon>
					</view>
					<view v-if="item.status>1"><text class="hui">{{item.status<3?'预计到达时间：':stateTip!==7?'到达时间：':'维系完成时间：'}}</text>{{item.workerArrivalTime}}</view>
					<view><text class="hui">维修事项：</text>{{item.repairContent}}</view>
					<view v-if="stateTip==8"><text class="hui">完成时间：</text>{{item.updatedDate.replace(/T/g,' ')}}</view>
					<view v-if="stateTip==5" class="tip">维修完成，请进行验收</view>
					<view v-if="stateTip==6" class="tip">验收合格，请确认付款</view>
				</view>
				<view class="address flexC b-l" v-if="stateTip" @click="openLocation(item.tOrderAddress)">
					<view><h-icon class-name="ico_address" src="ico_address"></h-icon></view>
					<view class="text">查看地址</view>
				</view>
			</view>
		</view>
		<view class="i-bottom" v-if="stateTip!=9">
			<block v-if="stateTip==1">
				<text class="i-text">确认师傅是否已到达？</text>
				<view
				class="btn-link"
				@click="postUpdate(3)"
				>确认到达</view>
			</block>
			<block v-if="stateTip>1||stateTip==0">
				<view v-if="(item.status<7&&item.fixType==1)||stateTip==0||stateTip==7"><slot name="quxiao"></slot></view>
				
				<block v-if="stateTip!=7&&stateTip!=0">
					<view @click="navTo('/userPages/checkPic')" class="btn-cancel">查看照片</view>
					<view v-if="stateTip>1" class="btn-cancel" @click="navTo('/userPages/checkList')">
						{{stateTip==2?'查看维修事项':stateTip==3?'确认清单':'查看清单'}}
					</view>
				</block>
				<view v-if="stateTip==5" class="btn-cancel" @click="postUpdate(11)">去验收</view>
				<view v-if="item.status==3&&item.fixType==2"><slot name="xieshang"></slot></view>

				<view v-if="stateTip==6||stateTip==7"><slot name="pay"></slot></view>
				<view v-if="stateTip==8&&item.isEvaluation==0" class="btn-cancel" @click="navToEval">去评价</view>
			</block>
		</view>
  </view>

</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default: ()=>({})
			}
		},
		options: { styleIsolation: 'shared' },
		data() {
			return {
				statusList:['待接单','确认到达','等待生成清单','确认清单','维修中','待验收','待付款','待支付保证金','已完成','已取消','等待维修材料',''],
				isPayShow: false
			}
		},
		computed: {
			// 状态：1.待接单，2-待师傅到达，3.待师傅上传预备照片，4.待师傅填写清单，5待平台审核， 6.待用户确认费用，7.待门店接单，8待材料签收，
			// 9.待师傅上传维修后照片(维修中)，10.待客户验收， 11.待支付，12.平台审核不通过 13.待支付保证金 15.订单完成
			stateTip(){
				const status = this.item.status
				let tip = ''
				if(status==1){
					tip = 0
				} else if(status==2){
					tip = 1
				} else if (status<6){
					tip = 2
				} else if (status==6){
					tip = 3
				} else if (status==7){
					tip = 11
				} else if (status<10){
					tip = 4
				} else if (status==10){
					tip = 5
				} else if (status==11){
					tip = 6
				} else if (status==13){
					tip = 7
				} else if (status==15){
					tip = 8
				} else if (status==16){
					tip = 9
				} else{
					tip = 10
				}
				return tip
			}
		},
    methods: {
      //评价
			navToEval(){
				uni.navigateTo({
					url: '/userPages/evaluate?data='+JSON.stringify(this.item)
				})
			},
			navTo(path){
				uni.navigateTo({
					url: path+'?orderId='+this.item.orderId+'&stateTip='
					+this.stateTip+'&merchantId='+this.item.merchantId
					+'&fixType='+this.item.fixType+'&callFee='+this.item.callFee
				})
			},
			commitConsult(){
				uni.showModal({
					title:'是否结束此订单',
					content: '维修材料费用跟师傅协商线下处理，后续保修维护直接由师傅来负责，平台仅收取上门服务费',
					success: (e)=>{
						if(e.confirm){
							this.$apis.postApi('/order/cancelOrderWithoutRefund',{orderId:this.item.orderId}).then(({code,message}) => {
								if(code==200){
									this.$api.msg('提交成功');
									this.$emit('onConfim',status)
								} else {
									this.$api.msg(message);
								}
							}).catch(err=>{
								console.log(err)
							})
						}
					}
				})
			},
			postUpdate(status){
				const tips = status==3?'确认师傅是否到达':status === 11?'是否验收成功':status === 16?'是否取消订单':'确认清单是否正确'
			  let path = '/order/update'
				if(this.item.status>=3&&status==16){
					path = '/order/finishOrder'
				}
				uni.showModal({
					content: tips,
					success: (e)=>{
						if(e.confirm){
							this.$apis.postApi(path,{orderId:this.item.orderId,status:status}).then(({code,message}) => {
								if(code==200){
									this.$api.msg('提交成功');
									this.$emit('onConfim',status)
								} else {
									this.$api.msg(message);
								}
							}).catch(err=>{
								console.log(err)
							})
						}
					}
				})
			},
			telPhone(tel){
				uni.makePhoneCall({
						phoneNumber: tel
				})
			},
			getLocationInfo() {
				const that = this;
				uni.getLocation({
					type: "gcj02",
					success: function(res) {
						// 暂时
						that.longitude = res.longitude; //118.787575;
						that.latitude = res.latitude; //32.05024;
						var long = 0;
						var lat = 0;
						//小数点保留六位  经度
						if (that.longitude.toString().indexOf('.') > 0) {
							const longlatsplit = that.longitude.toString().split('.');
							if (longlatsplit.length >= 2) {
								long = parseFloat(longlatsplit[0] === "" ? 0 : longlatsplit[0]) + parseFloat("." + longlatsplit[1].slice(0,6));
							}
						}
						if (that.latitude.toString().indexOf('.') > 0) {
							const longlatsplit1 = that.latitude.toString().split('.');
							if (longlatsplit1.length >= 2) {
								lat = parseFloat(longlatsplit1[0] === "" ? 0 : longlatsplit1[0]) + parseFloat("." + longlatsplit1[1].slice(0,6));
							}
						}
						that.openMap(long,lat);
					},
				});
			},
			openMap(lon,lat){
				let to = {
					latitude: lat,
				  longitude:lon,
				}
				uni.navigateTo({
					url: '/userPages/map?to='+JSON.stringify(to)+'&orderId='+this.item.orderId
				})
				// uni.openLocation({
				// 	latitude: lat,
				// 	longitude:lon,
				// 	scale: 28
				// })
			},
			getAuthorize() {
				return new Promise((resolve, reject) => {
					uni.authorize({
						scope: "scope.userLocation",
						success: () => {
							resolve(); // 允许授权
						},
						fail: () => {
							reject(); // 拒绝授权
						},
					});
				});
			},
			openLocation(res){
				const {longitude,latitude} = res
				this.openMap(longitude,latitude)
				// this.getAuthorize().then(() => {
				// 	//同意后获取
				// 	this.getLocationInfo();
				// })
				// .catch(() => {
				// 	//不同意给出弹框，再次确认
				// 	this.openConfirm()
				// 		.then(() => {
				// 			this.getLocationInfo();
				// 		})
				// 		.catch(() => {
				// 			this.rejectGetLocation();
				// 		});
				// })
			}
    }
	}
</script>

<style lang="scss" scope="scoped">
	.order-item{
		border-radius: 16upx;
		background: #fff;
		margin-bottom: 20upx;
		padding: 0 20upx;
		.i-top{
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 74upx;
			font-size: 26upx;
			position: relative;
			.orderId{
				color: #999999;
				width: 70%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.state{
				font-weight: 400;
				color: #DD0717;
			}
		}
		.info1{
			position: relative;
			padding-bottom: 36upx;
			.personal{
				font-size: 30upx;
				color: #444;
				margin: 20upx 0;
				.img{
					width: 42upx;
					height: 42upx;
					border-radius: 100%;
					margin-right: 10upx;
					@extend .vc;
				}
				.name{
					font-weight: bold;
					padding: 0 10upx;
					color: #000;
				}
			}
			
			.address{
				margin-left: auto;
				position: relative;
				width: 180upx;
				height: 106upx;
				flex-direction: column;
				.text{
					font-size: 26upx;
					color: #666;
					margin-top: 12upx;
				}
			}
		}
		.info2{
			position: relative;
			padding: 20upx 0 36upx;
		}
		.contact{
			font-size: 30upx;
			line-height: 56upx;
			flex:1;
			.tip{
				padding: 30upx 0 5upx;
				line-height: 1;
			}
			.hui{
				color: #666;
			}
			.blue{
				color: #2878FF;
			}
		}
		.i-bottom{
			display: flex;
			width: 100%;
			align-items: center;
			justify-content:flex-end;
			height: 104upx;
			.i-text{
				font-size:28upx;
				flex:1;
			}
			.btn-link,.btn-cancel{
				min-width: 148upx;
				font-size: 26upx;
				height: 64upx;
				margin: 0 0 0 20upx;
			}
			view.btn-cancel:last-child{
				color: #000;
  			background: linear-gradient(360deg, #3B99FF 0%, #4083F0 100%);
				border:0;
			}
			&>view:last-child{
				/deep/.btn-cancel{
					color: #000;
					background: linear-gradient(360deg, #3B99FF 0%, #4083F0 100%);
					border:0;
				}
			}
		}
		.title{
			font-size:$font-sm + 2upx;
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
			width: 285upx;
			margin-bottom: 10upx;
		}
		.coupon-tip{
			padding: 4upx 6upx;
			background: #FEF7E9;
			font-size: $font-sm;
			color: $uni-color-primary;
			border-radius: 3upx;
			line-height: normal;
			display: inline-block;
			margin-bottom: 14upx;
		}
		
		.del-btn{
			padding:4upx 10upx;
			font-size:34upx; 
			height: 50upx;
			color: $font-color-light;
		}
		/deep/ {
			.tel{
				width: 30upx;
				height: 30upx;
				margin-left: 20upx;
			}
			.ico_address{
				width: 42upx;
				height: 42upx;
			}
		}
	}
</style>
